<template>
  <div style="" class="ScoreManageStyle">

    <el-row style="margin-top: 5px;">
      <el-col :span="1" :offset="22">
        <el-button
          type="primary"
          @click="add_or_modify_dialogVisible = true;"
        >
          新增
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="padding: 20px;">
        <el-table
          ref="tableData"
          :data="tableData"
          height="650" style="width: 100%; " class="table"
          border
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column label="使用" min-width="40" prop="use" header-align="center" align="center" /> -->
          <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center"
          />
          <!-- <el-table-column label="ID" prop="id" width="80" header-align="center" align="center" /> -->
          <el-table-column label="分级依据名称" prop="name" header-align="center" align="center" />
          <el-table-column label="依据来源" prop="source" header-align="center" align="center" />
          <el-table-column label="状态" prop="status" width="140" header-align="center" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '1'">使用中</span>
              <span v-if="scope.row.status == '0'">禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center" width="260" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="details(scope.row, scope.$index)">详情</el-button>
              <el-button v-if="scope.row.defaultFlag !== '0'"
                type="text"
                style="color: red;margin-left: 20px;"
                @click="deletes(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <!-- 增改分诊依据主弹窗 -->
    <el-dialog
      title="新增分诊依据"
      :visible.sync="add_or_modify_dialogVisible"
      width="80%"
      top="20px"
      :before-close="classAHandleClose"
    >
      <el-form ref="classAdata" :model="classAdata" :rules="classARules" label-width="90px"
      style="width: 100%;border-bottom: 1px solid #F0F0EE;height: 600px;overflow: auto"
      >
        <el-col :span="4">
          <el-form-item label="依据名称 :" prop="name">
            <el-input v-model="classAdata.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-form-item label="依据来源 :" prop="source">
            <el-input v-model="classAdata.source"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="状态 :" prop="status">
            <el-select v-model="classAdata.status" placeholder="">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="分诊类型 :" label-width="100px" prop="sample">
            <el-select v-model="classAdata.sample" filterable>
              <el-option
                v-for="item in tesamplection"
                :key="item.sample"
                :value="item.sample"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="2">
          <el-button size="small" type="primary" @click="Addindicators('classAdata')">添加依据</el-button>
        </el-col>
        <el-col :span="24">
          <el-divider />
        </el-col>
        <el-col :span="24">
          <p v-for="(item,key) in tableDete" style="margin-left: 30px;font-size: 15px;margin-top: -10px">
            <el-row>
              <el-col :span="5">
                <el-form-item label="分诊类型:">
                  <el-select v-model="item.content" disabled>
                    <el-option
                      v-for="res in tesamplection1"
                      :key="res.content"
                      :value="res.content"
                      :label="res.label"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="名称 :">
                  <el-input v-model="item.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="text-align: right">
                <el-button type="text" style="color: red;font-size: 16px;" @click="remove(item,key)">删除
                </el-button>
              </el-col>
            </el-row>
            <el-divider />
          </p>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="saveclassification()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑分诊依据弹窗 -->
    <el-dialog
      title="编辑分诊依据"
      :visible.sync="edindicators"
      width="80%"
      top="20px"
    >
      <el-form
        ref="editupdata"
        :model="editupdata"
        class="elform"
        style="width: 100%;border-bottom: 1px solid #F0F0EE;height: 350px;overflow: auto"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="依据名称 :" prop="name">
              <el-input v-model="editupdata.name" style="width: 60%;" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="依据来源 :" prop="source">
              <el-input v-model="editupdata.source" style="width: 60%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="1">
            <el-form-item label="状态 :" prop="status">
              <el-select v-model="editupdata.status" style="width: 60%;" placeholder="">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="1" :offset="1">
            <el-button size="small" type="primary" @click="Addindicators('editupdata')">添加依据</el-button>
          </el-col>
        </el-row>
        <el-divider />
        <p v-for="(item,key) in editupdata.listb" style="margin-left: 30px;font-size: 15px;margin-top: 10px">
          <el-row>
            <el-col :span="5">
              <el-form-item label="分诊类型 :">
                <el-select v-model="item.content">
                  <el-option
                    v-for="res in tesamplection1"
                    :key="res.content"
                    :value="res.content"
                    :label="res.label"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="名称 :">
                <el-input v-model="item.name" style="width: 60%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-button type="text" style="color: red;font-size: 16px;" @click="delRemove(item,key)">删除
              </el-button>
            </el-col>
          </el-row>
          <el-divider />
        </p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 20px"
          @click="upcancle"
        >取消</el-button>
        <el-button
          type="primary"
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 100px"
          @click="upTypeData('editupdata')"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAllClassification,saveClassification,deleteClassificationA,deleteClassificationB } from  '@/api/back-management/triage-manage/triage-basis'

export default {
  name: 'TeiageManage',
  components: {  },
  data() {
    return {
      /*弹窗 */
      add_or_modify_dialogVisible: false, // 新增修改评分弹出框标识
      // 数据表格
      tableData: [],
      /* 新增表单数据 */
      classAdata: {
        id: '',
        name: '分诊依据',
        source: '',
        status: '0',
        sample: '急危',
      },
      // 使用、禁用
      options: [{
        value: '1',
        label: '使用中'
      }, {
        value: '0',
        label: '禁用'
      }],
      //规则
      classARules: {
        name: [{ required: true, message: '请输入依据名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择使用/禁用', trigger: 'blur' }],
        source: [{ required: true, message: '请输入依据来源', trigger: 'change' }],
        sample: [{ required: true, message: '请选择分诊类型', trigger: 'blur' }]
      },
      /* 新增data */
      tableDete:[],
      tesamplection:[{sample: '急危',label: '急危'},{sample: '急重',label: '急重'},{sample: '急症',label: '急症'},
        {sample: '亚急',label: '亚急'},{sample: '非急',label: '非急'},
      ],
      tesamplection1:[{content: '急危',label: '急危'},{content: '急重',label: '急重'},{content: '急症',label: '急症'},
        {content: '亚急',label: '亚急'},{content: '非急',label: '非急'},
      ],
      /* 编辑data */
      edindicators: false,
      editupdata:{},
      /* 分页 */
      pageNum: 1,
      pageSize: 10,
      pageTotal: 0,
      /* 用户信息 */
      userId: this.$store.getters.userId,
      hospitalId: this.$store.getters.hospitalId,
      apiToken: this.$store.getters.apiToken,

      multipleSelection:[]
    }
  },
  created() {
    this.selectList()
  },
  methods: {
    /* 表格多选框 */
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    /* 列表 */
    selectList(){
      let data = {
        hospitalId: this.hospitalId
      }
      getAllClassification(data).then(res => {
        if(res.code === 0){
          this.tableData = res.data
          this.$nextTick(() => {
            this.tableData.forEach((v,i) => {
              if(v.status === '1'){
                this.$refs.tableData.toggleRowSelection(v,true)
              }
            })
          })
        }else{
          this.tableData = []
        }
      })
    },

    /* 详情 */
    details(row, index) {
      this.editupdata = row
      this.edindicators = true
    },
    /* 编辑弹出框取消*/
    upcancle() {
      this.edindicators = false
    },
    /* 编辑弹出窗-保存 */
    upTypeData(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          const listb = this.editupdata.listb
          let bol = true
          for(let i = 0; i< listb.length; i++) {
            listb[i].source = this.editupdata.source
            if(!listb[i].content){
              this.$message({
                type: 'error',
                message: '请选择分诊类型！'
              })
              bol = false
              break
            }else if(listb[i].name === ''){
              this.$message({
                type: 'error',
                message: '名称必须输入!'
              })
              bol = false
              break
            }
          }
          if(!bol){
            return false
          }
          const data = this.editupdata
          console.log(data)
          saveClassification(data).then(res => {
            if(res.code === 0){
              this.edindicators = false
              this.$message.success('保存成功')
              this.selectList()
            }
          }).catch(err => {
            this.$message.error('保存失败')
          })
        } else {
          this.$message({
            message: '添加失败',
            type: 'error',
            customClass: 'zZindex'
          })
        }
      })
    },

    /* 删除 */
    deletes(row,index) {
      this.$confirm('确认删除本条数据？')
        .then(_ => {
          let data = {
            id: row.id
          }
          deleteClassificationA(data).then(res => {
            if(res.code === 0){
              this.$message.success('删除成功')
              this.selectList()
            }else {
              this.$message.error('删除失败')
            }
          }).catch(err => {
            this.$message.error(err)
          })
        })
        .catch(_ => {})
    },
    // 新增依据主弹窗
    classAHandleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$refs['classAdata'].resetFields();
          this.tableDete = []
          done();
        })
        .catch(_ => {});
    },
    /* 添加每一项的依据 */
    Addindicators(formname) {
      if(formname === 'classAdata'){
        this.$refs[formname].validate((valid) => {
          if (valid) {
            const obj = {
              "name": ''
            }
            obj.userId = this.userId
            obj.content = this.classAdata.sample
            obj.source = this.classAdata.source
            obj.hospitalId = this.hospitalId
            this.tableDete.push(obj)
          } else {
            this.$message({
              message: '添加失败',
              type: 'error',
              customClass: 'zZindex'
            })
          }
        })
      }else {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            const obj = {
              "name": ''
            }
            obj.userId = this.userId
            obj.content = this.editupdata.sample
            obj.source = this.editupdata.source
            obj.hospitalId = this.hospitalId
            this.editupdata.listb.push(obj)
          } else {
            this.$message({
              message: '添加失败',
              type: 'error',
              customClass: 'zZindex'
            })
          }
        })
      }

    },
    /* 删除新增弹窗依据 */
    remove(data, val) {
      this.tableDete.splice(val, 1)
    },
    /* 删除编辑弹窗依据 */
    delRemove(data, val) {
      console.log(data)
      if(data.id){
        let Id = { id: data.id}
        deleteClassificationB(Id).then(res => {
          if(res.code === 0){
            this.$message.success('删除成功')
            this.selectList()
          }else {
            this.$message.error('删除失败')
          }
        })
      }else{
        this.editupdata.listb.splice(val, 1)
      }
    },

    // 保存新增数据
    saveclassification(){
      const listb = this.tableDete
      let bol = true
      for(let i = 0; i< listb.length; i++) {
        if(listb[i].name === ''){
          this.$message({
            type: 'error',
            message: '名称必须输入!'
          })
          bol = false
          break
        }
      }
      if(!bol){
        return false
      }
     const data = {
          "userId": this.userId,
          "name": this.classAdata.name,
          "source": this.classAdata.source,
          "hospitalId": this.hospitalId,
          "status": this.classAdata.status,
          "listb": listb
      }
      saveClassification(data).then(res => {
        if(res.code === 0){
          this.add_or_modify_dialogVisible = false
          this.$message.success('保存成功')
          this.selectList()
        }
      }).catch(err => {
        this.$message.error('保存失败')
      })
    },
    // 取消新增按钮
    cancel(){
      this.$refs['classAdata'].resetFields();
      this.tableDete = []
      this.add_or_modify_dialogVisible = false
    },
    // 分页尺寸改变
    handleSizeChange(size) {
      this.pageSize = size
    },
    // 分页换页
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
    }
  }
}
</script>

<style scoped>
  .relative{
    height: 530px;
    overflow: overlay;
  }
  .relative >>> .el-form-item__label {
    font-size: 16px;
  }
  .relative-phone{
    padding: 10px 20px;
    border-bottom: 1px solid #E1E1E1;
  }
</style>
